<template>
  <div class="rating_page">
    <z-head></z-head>
    <div class="z-main">
      <card>
        <h4 slot="header">{{ $route.query.title}}</h4>
        <div slot="content">
          <div class="content-describe">{{ $route.query.time }}</div>
          <div class="content-main" v-html="content">
          </div>
        </div>
      </card>
    </div>
    <z-loading :show="loading"></z-loading>
  </div>
</template>

<script>
import {Card } from 'vux'
import ZHead from '@/components/header/head'
import ZFoot from '@/components/footer/foot'
import ZLoading from '@/components/loading'
import {getNewsDetail} from '@/service/getData'
export default {
  data () {
    return {
      loading:false,
      content:'',
    }
  },
  mounted(){
    this.loading = true;
    getNewsDetail(this.$route.query.articleUrl).then(res => {
      this.content = res.data;
      this.loading = false;
    });
  },
  components:{
    ZHead,ZFoot,Card,ZLoading
  },
  methods:{
  },
  watch:{
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @import "../../../assets/style/mixin";
  .rating_page{
    height: 100%;
    position: fixed;
    top:0;
    right:0;
    .fd;
    .z-main{
      flex:1;
      overflow-y: auto;
      background-color: white;
      padding: 0 .6rem;
      .content-describe{
        .sc(.6rem, #999);
      }
      .content-main{
        .font(.7rem, 1.2);
      }
    }
  }
</style>
